<template>
  <el-dialog
    v-model="props.showPreview"
    :title="`拆条预览 (${formatTime(startTime)} - ${formatTime(endTime)})`"
    width="800px"
    class="player-dialog"
    @close="handleClose"
  >
    <div style="width: 100%; height: 500px;">
      <VideoPlayer
        v-if="props.currentClip?.url"
        :src="props.currentClip.url"
        :controls="true"
        :autoplay="true"
        :muted="false"
        :start-time="startTime.value"
        @ready="onPlayerReady"
        @timeupdate="onTimeUpdate"
        ref="previewVideoPlayer"
      ></VideoPlayer>
      <div v-else class="no-video-tip">
        <el-icon><VideoCamera /></el-icon>
        <span>暂无视频源</span>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import VideoPlayer from '@/components/VideoPlayer.vue'
import { VideoCamera } from '@element-plus/icons-vue'
import { computed, watch, onMounted } from 'vue'
import { ref } from 'vue'

console.log('ClipPreviewDialog组件开始加载');

// 定义props和emits，支持v-model
const props = defineProps({
  showPreview: {
    type: Boolean,
    default: false
  },
  currentClip: {
    type: Object,
    default: null
  }
})

// 定义事件，支持v-model双向绑定
const emit = defineEmits(['update:showPreview'])

// 本地预览视频播放器引用
const previewVideoPlayer = ref(null)

// 组件挂载时的调试信息
onMounted(() => {
  console.log('ClipPreviewDialog组件已挂载到DOM');
  console.log('挂载时showPreview状态:', props.showPreview);
  console.log('挂载时currentClip数据:', props.currentClip);
})

// 监听showPreview变化
watch(() => props.showPreview, (newValue) => {
  console.log('ClipPreviewDialog: showPreview值变化为:', newValue);
})

// 监听currentClip的变化
watch(() => props.currentClip, (newValue) => {
  console.log('ClipPreviewDialog: currentClip值变化为:', newValue);
})

// 处理对话框关闭事件
const handleClose = () => {
  emit('update:showPreview', false)
}

// 计算开始时间和结束时间（转换为秒）
const startTime = computed(() => {
  if (!props.currentClip) return 0
  
  // 适配数据结构：支持两种格式
  if (props.currentClip.startTime) {
    // 如果是HH:MM:SS格式
    const [hours, minutes, seconds] = props.currentClip.startTime.split(':').map(Number)
    return hours * 3600 + minutes * 60 + seconds
  } else if (props.currentClip.start_time) {
    // 原来的ISO时间字符串格式
    const startTimeObj = new Date(props.currentClip.start_time)
    const videoStartTimeObj = props.currentClip.video_start_time ? new Date(props.currentClip.video_start_time) : startTimeObj
    return Math.max(0, (startTimeObj - videoStartTimeObj) / 1000)
  }
  
  return 0
})

const endTime = computed(() => {
  if (!props.currentClip) return 0
  
  // 适配数据结构：支持两种格式
  if (props.currentClip.endTime) {
    // 如果是HH:MM:SS格式
    const [hours, minutes, seconds] = props.currentClip.endTime.split(':').map(Number)
    return hours * 3600 + minutes * 60 + seconds
  } else if (props.currentClip.end_time) {
    // 原来的ISO时间字符串格式
    const endTimeObj = new Date(props.currentClip.end_time)
    const videoStartTimeObj = props.currentClip.video_start_time ? new Date(props.currentClip.video_start_time) : new Date(props.currentClip.start_time || 0)
    return Math.max(0, (endTimeObj - videoStartTimeObj) / 1000)
  }
  
  return 0
})

// 格式化时间显示
const formatTime = (seconds) => {
  if (isNaN(seconds) || seconds < 0) {
    return '00:00:00'
  }
  
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const remainingSeconds = Math.floor(seconds % 60)
  
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 播放器准备就绪处理
const onPlayerReady = async () => {
  console.log('ClipPreviewDialog: 播放器准备就绪');
  // 注意：不应直接通过ref调用VideoPlayer内部方法，
  // 而是应该在VideoPlayer组件内部实现自动定位到起始时间的逻辑
}

// 时间更新处理，实现进度条限制
const onTimeUpdate = (time) => {
  // 这里的time参数已经是从VideoPlayer组件通过事件传递过来的
  // 检查是否超出结束时间范围
  if (time >= endTime.value - 0.5) { // 留出一点缓冲区
    console.log('ClipPreviewDialog: 播放已到达结束时间点');
    // 不直接调用pause方法，因为我们无法通过ref访问VideoPlayer内部的player实例
  }
}

// 监听showPreview变化
watch(() => props.showPreview, (newValue) => {
  console.log("ClipPreviewDialog: showPreview状态变化为:", newValue);
  console.log("当前currentClip数据:", props.currentClip);
  
  // 注意：不应通过ref调用VideoPlayer内部方法，这些逻辑应该在VideoPlayer组件内部处理
})
</script>

<style scoped>
.player-dialog .el-dialog__body {
  padding: 0;
}

.no-video-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;
  background-color: #f5f7fa;
}

.no-video-tip .el-icon {
  margin-right: 8px;
  font-size: 24px;
}
</style>